<template>
  <div id="article-detail">
    <!-- 文章 ↓ -->
    <div class="w-800">
      <!-- 文章标题 ↓ -->
      <h2 class="title">{{article.articleTitle}}</h2>
      <!-- 文章信息 ↓ -->
      <div class="info">
        <div class="m-r-10">作者: {{ article.articleAuthor }}</div>
        <div class="m-r-10"><i class="el-icon-time"></i> {{ article.createTime | dateTime }}</div>
        <div class="m-r-10"><i class="el-icon-menu"></i> {{ articleType.articleTypeName == undefined?'无分类':articleType.articleTypeName }}</div>
        <div class="m-r-10"><i class="el-icon-chat-round"></i> {{ article.commentNum }}</div>
        <div class="m-r-10"><i class="el-icon-view"></i> {{ article.looknum }}</div>
        <div class="m-r-10"><i class="el-icon-star-off"></i> {{ article.likenum }}</div>
      </div>
      <!-- 文章简介 ↓ -->
      <div class="description"><i class="el-icon-price-tag m-r-15"></i>{{article.articleDescription}}</div>
      <!-- 文章内容 ↓ -->
      <div class="ql-editor article" v-html="article.articleContent"></div>
      <!-- 点赞 ↓ -->
      <div class="like">
        <div class="text-align-center">
          <h4 class="m-b-15">如果感觉还不错请给一个赞！</h4>
          <el-button type="primary" @click="giveALike" ><i class="el-icon-thumb"></i> 点赞</el-button>
        </div>
      </div>
      <add-comment @getNewList="getCommentList(commentArticleId)" />
      <!-- 留言列表 -->
      <div class="comment-list">
        <h2 class="text-align-center p-t-10 p-b-10"><i class="el-icon-back"></i> 留言列表 <i class="el-icon-right"></i></h2>
        <div v-if="commentList.length == 0" class="text-align-center">
          <el-divider></el-divider>
          <i class="el-icon-chat-square fz-50"></i>
          <h3>暂无留言</h3>
          <el-divider></el-divider>
        </div>
        <div v-else >
          <div class="comment" v-for="(item, index) in commentList" :key="index">
            <header class="h-40 l-h-40 flex">
              <div class="w-30 m-r-10"><img width="100%" class="border-r" :src="item.commentIcon" alt=""></div>
              <h3 class="color2">{{item.commentName}}</h3>
            </header>
            <div class="content">
              <div>{{item.commentContent}}</div>
              <div v-if="item.isReply" class="reply m-t-10 ">管理员回复: {{item.reply}}</div>
            </div>
            <footer>
              <div class="fz-14"><i class="el-icon-time"></i> {{item.createTime | dateTime}}</div>
            </footer>
          </div>
          <el-pagination
            @size-change="sizeChange"
            @current-change="currentChange"
            :current-page="page.currentPage"
            :page-sizes="pageSizes"
            :page-size="page.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="totalNum" 
            class="flex flex-space-between">
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 右侧推荐↓ -->
    <div class="w-270">
      <SpecialRecommend />
    </div>
  </div>
</template>

<script>
import SpecialRecommend from '../components/SpecialRecommend'
import AddComment from '../components/AddComment'
export default {
  components: {
    SpecialRecommend,
    AddComment
  },
  data() {
    return {
      article: {},
      articleType: {},
      commentList: [],
      commentArticleId: '',
      page: {
        pageSize: 10,
        currentPage: 1,
      },
      pageSizes: [10, 20, 30, 40, 50],
      totalNum: 1000,
    }
  },
  watch: {
    // 因为$routr.parmas.id的变化并不会重新渲染整个页面，
    // 所以需要使用监听属性，判断参数id是否变化，如果参数id变化
    // 就将this.commentArticleId 重新赋值
    '$route.params.id'() {
      this.getArticleDeteil()
      this.commentArticleId = this.$route.params.id
      this.getCommentList()
    }
  },
  created() {
    this.getArticleDeteil()
    this.commentArticleId = this.$route.params.id
    this.getCommentList()
  },
  methods: {
    async getArticleDeteil() {
      let res = await this.api.get('/client/getArticleDeteil',{params: {id: this.$route.params.id}})
      if(res.code == 0) {
        this.article = res.data
        this.articleType = res.data.articleType
      }
    },
    async giveALike() {
      let res = await this.api.get('/client/giveALike',{params: {id: this.$route.params.id}})
      if(res.code == 0) this.article.likenum = this.article.likenum + 1
    },
    async getCommentList() {
      let res = await this.api.post('/client/getCommentList', {
        ...this.page,
        commentArticleId: this.commentArticleId
      })
      if(res.code == 0) {
        this.commentList = res.data.commentList
        this.totalNum = res.data.counts
      }
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
      this.getCommentList()
    },
    currentChange(thisPage) {
      this.page.currentPage = thisPage
      this.getCommentList()
    },
  }, 
}
</script>

<style lang="scss">
#article-detail {
  width: 1100px;
  margin: 0 auto;
  padding-top: 80px;
  display: flex;
  justify-content: space-between;
  .title {
    color:#303133;
    margin-bottom: 20px;
  }
  .info {
    display: flex;
    height: 30px;
    line-height: 30px;
    margin-bottom: 15px;
    color: #909399;
    font-size: 14px;
  }
  .description {
    background: #EBEEF5;
    color: #909399;
    padding: 15px;
  }
  .ql-editor {
    padding-left: 0;
    padding-right: 0;
    color: #303133;
    height: auto;
  }
  .like {
    height: 150px;
    border-top: 1px solid #909399;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .comment-list {
    color: #606266;
    margin-top: 30px;
    border-top: 1px solid #DCDFE6;
    .comment {
      border-bottom: 1px dashed #DCDFE6;
      padding: 18px 0;
      img {
        vertical-align: middle;
      }
      .content {
        padding: 15px 15px;
        border-left: 3px solid #ddd;
        background: #f6f6f6;
        margin: 14px auto;
        .reply {
          color: #fa6706;
        }
      }
    }
  }
}
</style>